<template>
  <div class="app-container">
    <div class="stat_box u-f u-fw" v-if="memusid!=5&&memusid!=6">
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('订单总金额') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_green">{{ stat.total_order_amount }}</span>
          <span class="font18 text_blue">{{ $t('月') }}</span>
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('已付款金额') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_black">{{ stat.pay_order_amount }}</span>
          <span class="font18 text_blue">{{ $t('月') }}</span>
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('已分成金额') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_green">{{ stat.brokerage_amount }}</span>
          <span class="font18 text_blue">{{ $t('月') }}</span>
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('待审核分成') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_warning">{{ stat.audit_amount }}</span>
          <span class="font18 text_blue">{{ $t('全部') }}</span>
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('订单总数') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_black">{{ stat.total_order_num }}</span>
          <span class="font18 text_blue">{{ $t('月') }}</span>
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('已完成订单') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_black">{{ stat.complete_num }}</span>
          <span class="font18 text_blue">{{ $t('月') }}</span>
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('未支付订单') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_danger">{{ stat.not_pay_num }}</span>
          <span class="font18 text_blue">{{ $t('全部') }}</span>
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('超时订单') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_danger">{{ stat.overdue_num }}</span>
          <span class="font18 text_blue">{{ $t('全部') }}</span>
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('总设备') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_black">{{ stat.device_num }}</span>
          <span class="font18 text_blue">{{ $t('全部') }}</span>
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('在线设备') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_green">{{ stat.online_num }}</span>
          <span class="font18 text_blue">{{ $t('全部') }}</span>
        </div>
      </div>

      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('租用率') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_green" :style="{color:colorsty}">{{ rent }}%</span>
          <span class="font18 text_blue">{{ $t('月') }}</span>
          <!-- <span class="font18 text_blue">{{ $t('全部') }}</span> -->
        </div>
      </div>

      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('租用率') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_green" :style="{color:colorsty}">{{ rentweek }}%</span>
          <span class="font18 text_blue">{{ $t('周') }}</span>
          <!-- <span class="font18 text_blue">{{ $t('全部') }}</span> -->
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('租用率') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_green" :style="{color:colorsty}">{{ rentday }}%</span>
          <span class="font18 text_blue">{{ $t('日') }}</span>
          <!-- <span class="font18 text_blue">{{ $t('全部') }}</span> -->
        </div>
      </div>
      

    </div>
    <div class="stat_box u-f u-fw" v-else>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('租用率') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_green" :style="{color:colorsty}">{{ rent }}%</span>
          <span class="font18 text_blue">{{ $t('月') }}</span>
          <!-- <span class="font18 text_blue">{{ $t('全部') }}</span> -->
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('租用率') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_green" :style="{color:colorsty}">{{ rentweek }}%</span>
          <span class="font18 text_blue">{{ $t('周') }}</span>
          <!-- <span class="font18 text_blue">{{ $t('全部') }}</span> -->
        </div>
      </div>
      <div class="list box_shadow">
        <p class="font16 title border_bottom">{{ $t('租用率') }}</p>
        <div class="u-f u-f-ac u-f-jsb">
          <span class="font24 text_green" :style="{color:colorsty}">{{ rentday }}%</span>
          <span class="font18 text_blue">{{ $t('日') }}</span>
          <!-- <span class="font18 text_blue">{{ $t('全部') }}</span> -->
        </div>
      </div>

    </div>

    <!-- <span v-if="row.type == 2">{{ $t("密码线") }}</span> -->
    <!-- <div class="statis_table u-f">

      <div class="left u-f1 box_shadow">
        <el-table :data="newOrder">
          <el-table-column prop="nick" :label="$t('用户名')"></el-table-column>
          <el-table-column prop="amount" :label="$t('金额')"></el-table-column>
          <el-table-column prop="type" :label="$t('类型')">
            <template slot-scope="{ row }">
              <span v-if="row.type == 1">{{ $t("充氧宝") }}</span>
             
            </template>
          </el-table-column>
          <el-table-column prop="status" :label="$t('状态')">
            <template slot-scope="{ row }">
              <span class="text_blue" v-if="row.status == 1">{{ $t("租借中") }}</span>
              <span v-if="row.status == 2">{{ $t("已完成") }}</span>
              <span class="text_danger" v-if="row.status == 4">{{ $t("订单超时") }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="start_time" :label="$t('开始时间')"></el-table-column>
        </el-table>
      </div>

      <div class="right u-f1 box_shadow">
        <el-table :data="topSeller">
          <el-table-column prop="name" :label="$t('商户')"></el-table-column>
          <el-table-column prop="amount" :label="$t('金额')"></el-table-column>
          <el-table-column prop="area" :label="$t('区域')"></el-table-column>
        </el-table>
      </div>
    </div> -->



    <!-- <div class="statis_table">
      
      <div class="left">
        <div class="echars box_shadow">
          <div class="echars_title">
            <span :class="titleCurrent == 'devices' ? 'titleCurrent' : ''" @click="switchs('devices')">订单总金额</span>
            <span :class="titleCurrent == 'user' ? 'titleCurrent' : ''" @click="switchs('user')">新增用户量</span>
          </div>
          <div class="total_order">{{ topTime }}的{{ orderOrUser }}：{{ count }}</div>
          <el-button-group class="left_top—btn—group">
            <el-button type="primary" class="left_top—btn" :plain="topCurrent != 'day'" @click="getOrderTen('day')">
              近十天</el-button>
            <el-button type="primary" class="left_top—btn" :plain="topCurrent != 'month'"
              @click="getOrderTen('month')">月</el-button>
            <el-button type="primary" class="left_top—btn" :plain="topCurrent != 'year'" @click="getOrderTen('year')">
              年</el-button>
          </el-button-group>
          <div id="order_amountt" style=" width:1058px; height: 300px"></div>
        </div>
        <div class="left_bottom box_shadow">
          
          <div class="left_bottom_l">
            <div class="echarsWrap">
              <div class="device_num_title">设备占比分布图</div>
              <div class="isOnlineNum">
                <span>在线设备：{{ online_num }}</span>
                <span>离线设备：{{ outline_num }}</span>
              </div>
              <div id="device_num" style="height: 280px"></div>
              <div class="total—device">
                <span class="total—device_num">{{ total_num }}</span>
                <span>总设备量</span>
              </div>
            </div>
            <div class="device_list">
              <ul>
                <li v-for="(item, key, index) in list" :key="index">
                  <img :src="require(`../../assets/img/${key}.png`)" alt="" />
                  <div>
                    <span>{{ item.name }}</span>
                    <div class="num">
                      <span>{{ item.num }}台</span>
                      <div class="mix_warp" style="color: #ef5151">
                        <span>占比</span>
                        <span class="mix">{{ item.percent }}%</span>
                      </div>
                    </div>
                  </div>
                </li> -->
                <!-- <li>
                    <img src="../../assets/img/zs6.png" alt="" />
                    <div>
                      <span>{{ list.zs6.name }}</span>
                      <div class="num">
                        <span>{{ list.zs6.num }}台</span>
                        <div class="mix_warp" style="color: #5ba8ff">
                          <span>占比</span>
                          <span class="mix">{{ list.zs6.percent }}%</span>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <img src="../../assets/img/pm8.png" alt="" />
                    <div>
                      <span>{{ list.pm8.name }}</span>
                      <div class="num">
                        <span>{{ list.pm8.num }}台</span>
                        <div class="mix_warp" style="color: #7cec82">
                          <span>占比</span>
                          <span class="mix">{{ list.pm8.percent }}%</span>
                        </div>
                      </div>
                    </div>
                  </li>

                  <li>
                    <img src="../../assets/img/zs12.png" alt="" />
                    <div>
                      <span>{{ list.zs12.name }}</span>
                      <div class="num">
                        <span>{{ list.zs12.num }}台</span>
                        <div class="mix_warp" style="color: #f47abd">
                          <span>占比</span>
                          <span class="mix">{{ list.zs12.percent }}%</span>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <img src="../../assets/img/gs24.png" alt="" />
                    <div>
                      <span>{{ list.gs24.name }}</span>
                      <div class="num">
                        <span>{{ list.gs24.num }}台</span>
                        <div class="mix_warp" style="color: #ffd75d">
                          <span>占比</span>
                          <span class="mix">{{ list.gs24.percent }}%</span>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li>
                    <img src="../../assets/img/gs48.png" alt="" />
                    <div>
                      <span>{{ list.gs48.name }}</span>
                      <div class="num">
                        <span>{{ list.gs48.num }}台</span>
                        <div class="mix_warp" style="color: #b7aefb">
                          <span>占比</span>
                          <span class="mix">{{ list.gs48.percent }}%</span>
                        </div>
                      </div>
                    </div>
                  </li> -->
              <!-- </ul>
            </div>
          </div>
          <div class="left_bottom_r">
            <el-button-group class="left_bottom—btn—group">
              <el-button type="primary" class="left_bottom—btn" :plain="current != 'day'"
                @click="getDeviceTen('day')">近十天</el-button>
              <el-button type="primary" class="left_bottom—btn" :plain="current != 'month'"
                @click="getDeviceTen('month')">月</el-button>
              <el-button type="primary" class="left_bottom—btn" :plain="current != 'year'"
                @click="getDeviceTen('year')">年</el-button>
            </el-button-group>
            <p>设备收入统计图</p>
            <div>
              <ul>
                <li v-for="(item, index) in deviceIncome" :key="index">
                  <div class="itemWrap">
                    <div>
                      <img :src="require('../../assets/img/' + item.src)" alt="" />
                      <span>{{ item.name }}</span>
                    </div>
                    <div class="profit—num">{{ item.amount }}</div>
                  </div>
                  <el-progress :stroke-width="16" :percentage="(item.amount / incon_total_amount) * 100"
                    :show-text="false" :color="item.color"></el-progress>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div> -->
      <!-- 商户top10 -->
      <!-- <div class="right box_shadow">
        <span class="title">全国收益排行榜</span>
        <img src="../../assets/img/shouyipaihang@2x.png" />
        <el-table :data="topSeller" :header-cell-style="{ 'background-color': '#E1EDF6' }">
          <el-table-column prop="name" :label="$t('商户')"></el-table-column>
          <el-table-column prop="amount" :label="$t('金额')"></el-table-column>
          <el-table-column prop="area" :label="$t('区域')"></el-table-column>
        </el-table>
      </div>
    </div> -->


    <refresh @click="handleRefresh"></refresh>

  </div>
</template>

<script>
import util from "@/assets/js/util.js"
import echarts from "echarts";
import { mapState } from "vuex";
export default {
  name: "index",
  data() {
    return {
      stat: {},
      topSeller: [],
      newOrder: [],
      name: "",
      datas: "",
      total: {},
      total_amount: [],
      incon_total_amount: 0,
      day: [],
      week: [],
      count: 0, //订单总额
      current: "day",
      topCurrent: "day",
      titleCurrent: "devices",
      topTime: "近十天",
      orderOrUser: "订单总额",
      list: [], //设备列表
      online_num: 0, //设备在线数
      outline_num: 0, //设备离线数
      total_num: 0, //设备总数
      deviceIncome: [], //设备信息
      colorsty: '#F56C6C',
      rent:0,
      rentweek:0,
      rentday:0
    }
  },

  computed: {
    ...mapState(["permissions","memusid","uid","name"]),
  },

  mounted() {
    console.log("打印一下memusid")
    console.log(this.memusid);
    this.dates = util.getDate("month");
    this.getData();
    this.getTopData();
    this.getOrderData();
    this.getEcharsData("day");
    this.getCirclesData();
    this.getDeviceIncome("day");
    this.getDeviceRent();
  },
  methods: {
    getDeviceRent() {
      util.$http("/index/devicerent",{
        memusid: this.memusid,
        uid: this.uid
      }).then((res) => {
        // 返回值
        // console.log("租借率")
        // console.log(res);
        if (res.code == 1) {
          this.rent = res.data.rent; 
          this.rent = this.rent.toFixed(2);
          this.rentweek = res.data.rentweek.toFixed(2);
          this.rentday = res.data.rentday.toFixed(2);
          //判断一下
          if(res.data.rent>10){ //绿色
            this.colorsty = '#67C23A';
          }else{ //红色
            this.colorsty = '#F56C6C';
          }

          // let { online_num, outline_num, total_num, list } = res.data;
          // this.list = list;
          // this.online_num = online_num;
          // this.outline_num = outline_num;
          // this.total_num = total_num;
          // this.$nextTick(() => {
          //   this.deviceNum();
          // });
        }
      });
    },
    handleRefresh() {
      this.getData();
      this.getTopData();
      this.getOrderData();
      this.getDeviceTen("day");
      this.getOrderTen("day");
    },
    getEcharsData(date) {
      util
        .$http("/index/graph", {
          type: date,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 1) {
            this.count = res.data.count;
            // this.total = res.data.total
            let lists = res.data.list;
            let total_amount = [];
            let day = [];
            let week = [];
            for (let i = 0; i < lists.length; i++) {
              if (lists[i].week) {
                week.push(lists[i].week);
              }
              day.push(lists[i].date);
              total_amount.push(lists[i].total_amount);
            }
            this.day = day;
            this.total_amount = total_amount;
            if (week.length > 0) {
              this.week = week;
            }
            setTimeout(() => {
              this.orderAmount();
            }, 200);
          }
        });
    },
    getNewUser(date) {
      util
        .$http("/index/graphUser", {
          type: date,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 1) {
            this.count = res.data.count;
            // this.total = res.data.total
            let lists = res.data.list;
            let total_amount = [];
            let day = [];
            let week = [];
            for (let i = 0; i < lists.length; i++) {
              if (lists[i].week) {
                week.push(lists[i].week);
              }
              day.push(lists[i].time);
              total_amount.push(lists[i].number);
            }
            this.day = day;
            this.total_amount = total_amount;
            this.week = week;
            // this.day = res.data.day;
            // this.orderAmount()
            // this.deviceNum()
            this.$nextTick(() => {
              this.orderAmount();
            });
          }
        });
    },
    getCirclesData() {
      util.$http("/index/device").then((res) => {
        console.log(res);
        if (res.code == 1) {
          let { online_num, outline_num, total_num, list } = res.data;
          this.list = list;
          this.online_num = online_num;
          this.outline_num = outline_num;
          this.total_num = total_num;
          this.$nextTick(() => {
            this.deviceNum();
          });
        }
      });
    },
    getDeviceIncome(date) {
      util
        .$http("/index/deviceIncome", {
          type: date,
        })
        .then((res) => {
          console.log(res);

          if (res.code == 1) {
            let deviceIncome = res.data;
            this.deviceIncome = deviceIncome;
            let incon_total_amount = 0;
            for (let i of deviceIncome) {
              incon_total_amount += i.amount;
            }
            this.incon_total_amount = incon_total_amount;
            console.log(incon_total_amount);
            // console.log(deviceIncome);
          }
        });
    },
    getData() {
      util.$http("/index/stat").then((res) => {
        if (res.code == 1) {
          this.stat = res.data;
        }
      });
    },
    getTopData() {
      util.$http2("/index/seller").then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.topSeller = res.data;
        }
      });
    },
    getOrderData() {
      util.$http2("/index/user").then((res) => {
        if (res.code == 1) {
          this.newOrder = res.data;
        }
      });
    },
    //上图表
    orderAmount() {
      let myChart = this.$echarts.init(document.getElementById("order_amountt"));
      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "#409EFF",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#409EFF",
            },
          },
          formatter: (params) => {
            // console.log(params);
            let firstParams = params[0];
            let value = params[0].value;
            let index = params[0].dataIndex;
            let week = this.week[index];
            if (!week) {
              week = "";
            }
            // console.log(index);
            return (
              firstParams.name + "  " + week + "<br>" + this.orderOrUser + ": " + value
            );
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.day,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            type: "line",
            stack: "总量",
            lineStyle: {
              width: 1,
              color: "#668FB7",
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [
                {
                  offset: 0,
                  color: "rgba(64,158,255)",
                },
                {
                  offset: 1,
                  color: "rgba(256, 256, 256)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: this.total_amount,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    //下图环形图
    deviceNum() {
      let myChart = this.$echarts.init(document.getElementById("device_num"));
      let option = {
        // title: {
        //       text: '设备占比分布图',
        //   },
        tooltip: {
          trigger: "item",
        },
        color: ["#EF5151", "#5BA8FF", "#7CEC82", "#F47ABD", "#FFD75D", "#B7AEFB"],
        series: [
          {
            type: "pie",
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            // emphasis: {
            //     label: {
            //         show: true,
            //         fontSize: '20',
            //         fontWeight: 'normal'
            //     }
            // },
            labelLine: {
              show: false,
            },
            left: 0,
            top: "20%",
            bottom: 0,
            data: [
              {
                value: this.list.zs4.num,
                name: this.list.zs4.name,
              },
              {
                value: this.list.zs6.num,
                name: this.list.zs6.name,
              },
              {
                value: this.list.pm8.num,
                name: this.list.pm8.name,
              },
              {
                value: this.list.zs12.num,
                name: this.list.zs12.name,
              },
              {
                value: this.list.gs24.num,
                name: this.list.gs24.name,
              },
              {
                value: this.list.gs48.num,
                name: this.list.gs48.name,
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    //折线图主题切换
    switchs(item) {
      // console.log(item);
      this.titleCurrent = item;
      this.topCurrent = "day";
      this.topTime = "近十天";
      if (item == "devices") {
        this.orderOrUser = "订单总额";
        this.getEcharsData("day");
      } else {
        this.orderOrUser = "新增用户";
        this.getNewUser("day");
      }
    },
    //折线图按钮切换
    getOrderTen(days) {
      this.topCurrent = days;
      if (days == "day") {
        this.topTime = "近十天";
      } else if (days == "month") {
        this.topTime = "本月";
      } else {
        this.topTime = "今年";
      }
      if (this.titleCurrent == "devices") {
        this.getEcharsData(days);
      } else {
        this.getNewUser(days);
      }
    },
    //环形图按钮切换
    getDeviceTen(days) {
      this.current = days;
      this.getDeviceIncome(days);
    },
  },
};
</script>

<style scoped>
.stat_box {
  margin-bottom: 20px;
}

.stat_box .list {
  /* width: 300px;
  margin-right: 25px;
  margin-bottom: 20px;
  padding: 15px 20px 10px;
  box-sizing: border-box; */

  width: 300px;
  margin-right: 25px;
  margin-bottom: 20px;
  padding: 15px 20px 10px;
  box-sizing: border-box;
}

.stat_box .list:not(:nth-child(5n)) {
    margin-right: calc(5% / 3);
}

/* 如果最后一行是3个元素 */
/* .list:last-child:nth-child(5n - 1) {
    margin-right: calc(24% + 4% / 4);
} */
/* 如果最后一行是2个元素 */
.list:last-child:nth-child(5n - 2) {
    margin-right: calc(27% + 29% / 2);
}

.stat_box .list .title {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  color: black;
}

.statis_table .left {
  padding: 15px 20px 20px;
  margin-right: 15px;
  box-sizing: border-box;
}

.statis_table .right {
  padding: 15px 20px 20px;
  box-sizing: border-box;
}


.app-container {
  width: 100%;
  overflow: scroll;
}

.box_shadow {
  margin-right: 0;
}

.stat_box {
  display: flex;
  justify-content: space-between;
  width: 1665px;
  color: #ffffff;
}

.stat_box .bgc_blue {
  background-color: #1571fa;
}

.stat_box .bgc_pink {
  background-color: #ef609e;
}

.stat_box .bgc_purple {
  background-color: #a14bf4;
}

.stat_box .bgc_orange {
  background-color: #fd9c55;
}

.stat_box .bgc_skyblue {
  background-color: #37c0ea;
}

/* .stat_box .list {
  display: flex;
  justify-content: space-between;
  width: 300px;
  margin-bottom: 20px;
  padding: 30px;
  border-radius: 4px;
  box-sizing: border-box;
} */

.stat_box .list .fontWrap {
  flex-direction: column;
  height: 50px;
}

.stat_box .list .amount {
  font-size: 24px;
}

.stat_box .list .money {
  font-size: 16px;
}

.stat_box .list img {
  width: 60px;
  height: 60px;
}

.statis_table {
  display: flex;
  justify-content: space-between;
}

.statis_table .left {
  width: 1080px;
  height: 317px;
  margin-right: 20px;
  box-sizing: border-box;
}

.statis_table .echars {
  position: relative;
  height: 300px;
  padding: 20px 20px;
}

.statis_table .echars .echars_title {
  position: absolute;
  font-size: 15px;
  color: #d1d2d4;
  z-index: 100;
  cursor: pointer;
}

.statis_table .echars .echars_title span {
  margin-right: 10px;
}

.titleCurrent {
  font-size: 18px;
  font-weight: 400;
  color: #666666;
}

.statis_table .echars .total_order {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: #666666;
}

.statis_table .echars .left_top—btn—group {
  position: absolute;
  right: 30px;
  z-index: 100;
}

.statis_table .echars .left_top—btn—group .left_top—btn {
  width: 85px;
  border: 1px solid #409eff;
}

.statis_table .left_bottom {
  display: flex;
  margin-top: 20px;
  padding: 30px 20px;
}

.statis_table .left_bottom .left_bottom_l {
  width: 40%;
  height: 500px;
  padding-right: 30px;
  border-right: 3px solid #f4f5f7;
  color: #858585;
}

.statis_table .left_bottom .left_bottom_l .echarsWrap {
  position: relative;
  width: 100%;
}

.statis_table .left_bottom .left_bottom_l .echarsWrap .device_num_title {
  position: absolute;
  font-size: 21px;
  color: #858585;
}

.statis_table .left_bottom .left_bottom_l .echarsWrap .isOnlineNum {
  position: absolute;
  right: 10px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  font-size: 16px;
}

.statis_table .left_bottom .left_bottom_l .echarsWrap .isOnlineNum span {
  margin-bottom: 10px;
}

.statis_table .left_bottom .left_bottom_l .echarsWrap .total—device {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -30%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 19px;
}

.statis_table .left_bottom .left_bottom_l .echarsWrap .total—device .total—device_num {
  font-size: 30px;
}

.statis_table .left_bottom .left_bottom_l .device_list ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.statis_table .left_bottom .left_bottom_l .device_list li {
  display: flex;
  align-items: center;
  width: 160px;
  margin: 15px 0;
}

.statis_table .left_bottom .left_bottom_l .device_list li img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.statis_table .left_bottom .left_bottom_l .device_list li .num {
  display: flex;
  margin-top: 10px;
}

.statis_table .left_bottom .left_bottom_l .device_list li .num .mix_warp {
  margin-left: 10px;
}

.statis_table .left_bottom .left_bottom_r {
  width: 60%;
}

.left_bottom_r {
  position: relative;
  padding: 0 30px;
}

.left_bottom_r .left_bottom—btn—group {
  position: absolute;
  right: 10px;
}

.left_bottom_r .left_bottom—btn {
  width: 85px;
  border: 1px solid #409eff;
}

.left_bottom_r p {
  margin: 0 0 35px 0;
  font-size: 21px;
  color: #858585;
}

.itemWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
  font-size: 20px;
  color: #858585;
}

.left_bottom_r img {
  width: 16px;
  height: 16px;
  margin-right: 20px;
}

.statis_table .right {
  width: 580px;
  height: 920px;
  padding: 10px 20px 0 20px;
  box-sizing: border-box;
}

.statis_table .right .title {
  font-size: 24px;
  color: #666666;
}

.statis_table .right img {
  width: 500px;
  height: 300px;
  margin-bottom: 2px;
}

.colorsss {
  background-color: #fff !important;
}
</style>
